<template>
  <div class="captcha-image">
    <img :src="captchaImage"
         @click="reload" />
  </div>
</template>

<script>

import { getCaptchaImage } from '../api/auth/index'

export default {
  name: 'CaptchaImage',
  data () {
    return {
      captchaImage: null,
      data: {}
    }
  },
  created () {
    this.reload()
  },
  methods: {
    reload () {
      getCaptchaImage().then(response => {
        if (typeof (response) == 'string') {
          response = {
            img: response
          }
        }
        this.captchaImage = response.img
        delete response.img
        this.data = response
      })
    },
    getData () {
      return this.data
    }
  }
}
</script>

<style lang="less">
.captcha-image {
  display: inline-block;
  > img {
    width: 93px;
    height: 38px;
  }
}
.captcha-image:hover {
  cursor: pointer;
}
</style>
